<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meteocal</title>
<link href="./css/registration.css" rel="stylesheet" type="text/css" />
</h:head>

<h:body style="background-color:#81a4c7">
	<div id="wrap">
    	<div id="header">
            <a href="home.xhtml"><img src="./images/Logo.png" style="width:150px; height:150px;" /></a>
            <div id="welcome_txt" style="float:right; margin-top:90px;">
            	<h1>Welcome to Meteocal!</h1>
            </div>
        </div>
        <div id="central">
            <div id="registration_area">
                <div id="registration_container">
                    <div id="registration_header">
                        <h1>Registration form</h1>
                    </div>
                    <h:form id="registrationform" style="font-family: Comic Sans MS; color: #ffffff; font-size: 20px">
                        <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />    
                        <h:panelGrid columns="1" id="regGrid">
                                <h:outputLabel style="margin-left: 20px;" for="name">Name:</h:outputLabel>
                                <p:inputText id="name"  value="#{registrationBean.user.name}" 
                                             style="width:360px; float:left; margin-right: 10px; margin-left: 20px;">
                                    <p:ajax update="namemsg"/>
                                </p:inputText>
                                <p:message id="namemsg" for="name" />

                                <h:outputLabel style="margin-left: 20px;" for="surname">Surname:</h:outputLabel>
                                <p:inputText id="surname" value="#{registrationBean.user.surname}" 
                                             style="width:360px; float:left; margin-right: 10px; margin-left: 20px;">
                                    <p:ajax update="surname"/>
                                </p:inputText>
                                <p:message id="surnamemsg" for="surname" />

                                <h:outputLabel style="margin-left: 20px;" for="email">Email:</h:outputLabel>
                                <p:inputText id="email" value="#{registrationBean.user.email}" 
                                             validatorMessage="Invalid email format"
                                             style="width:360px; float:left; margin-right: 10px; margin-left: 20px;" >
                                    <p:ajax class="ajax_class" update="emailmsg"/>
                                    
                                    <f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$"/>
                                </p:inputText>
                                <p:message id="emailmsg" for="email" />

                                <h:outputLabel style="margin-left: 20px;" for="password">Password:</h:outputLabel>
                                <p:password id="password" value="#{registrationBean.user.password}"
                                            feedback="true" match="pwd2" label="Password" 
                                            style="width:360px; float:left; margin-right: 10px; margin-left: 20px;"/>
                                <p:message for="password" />

                                <h:outputLabel style="margin-left: 20px;" for="pwd2">Confirm Password:</h:outputLabel>
                                <p:password id="pwd2" label="Confirm Password" 
                                            style="width:360px; float:left; margin-right: 10px; margin-left: 20px;"/>
                                <br />
                                <p:outputLabel style="margin-left: 20px;" for="privacy" value="Calendar privacy:" />
                                <p:selectOneRadio id="privacy" value="#{registrationBean.user.privacy}" 
                                                  style="width:360px; float:left; margin-right: 10px; margin-left: 20px;">
                                    <f:selectItem itemLabel="Private" itemValue="#{true}" />
                                    <f:selectItem itemLabel="Public" itemValue="#{false}" />
                                </p:selectOneRadio>
                                <br />
                                <p:commandButton id="submit" value="Register" update="regGrid" style="width: 370px; border:0; box-shadow:0px 2px 5px #000000; 
                                             float: left; margin-left: 20px; background: #6cb364; color: white; font-family: Comic Sans MS;"
                                             action="#{registrationBean.register()}" />
                                <br />
                            </h:panelGrid>
                    </h:form>
                </div>
            </div>
            <div id="info">
                <p style="padding-top:200px; padding-right: 10px;">Users, once registered, should be able to create, delete and update events. An event contains information about when and where the event will take place, whether the event will be indoor or outdoor. During event creation, any number of registered users can be invited by the organizer, which is the only one able to update or delete the event. Invited users can only accept or decline the invitation.</p>
            </div>
        </div>
        <div id="footer">
            <p>Software engineering 2</p>
            Project 2014-2015<br />
            Rimoldi_Lattari<br />
            <p></p>
        </div>
    </div>
</h:body>
</html>
